<ion-header>
    <ion-toolbar style="background: #FF6B68">
        <ion-searchbar (ionFocus)="onSearch()" mode="ios" placeholder="消息查询"></ion-searchbar>
    </ion-toolbar>
</ion-header>

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">
    <ion-refresher slot="fixed" (ionRefresh)="getMessageList($event)">
        <ion-refresher-content> </ion-refresher-content>
    </ion-refresher>
    <!-- <div class="menu-container">
        <div class="menu-items row">
            <div class="menu-item col-span-4" *ngFor="let item of menuList" [routerLink]="item.url">
                <div class="icon row tjcss">
                    <p>{{item.eventname}}</p>
                    <p>{{ item.num }}</p>
                </div>
            </div>
        </div>
    </div> -->

    <ion-row class="tjwrap">
        <ion-col size="4">
            <div class="catalog-item row tjcss">
                <div class="col-span-12 col middle-span center-span typenamecss">
                    <div class="tjone">{{menuList[0].num}}</div>
                    <div class="graycss">{{menuList[0].eventname}}</div>
                </div>
            </div>
        </ion-col>
        <ion-col size="4">
            <div class="catalog-item row tjcss">
                <div class="col-span-12 col middle-span center-span typenamecss">
                    <div class="tjtwo">{{menuList[1].num}}</div>
                    <div class="graycss">{{menuList[1].eventname}}</div>
                </div>
            </div>
        </ion-col>
        <ion-col size="4">
            <div class="catalog-item row tjcss">
                <div class="col-span-12 col middle-span center-span typenamecss">
                    <div class="tjthree">{{menuList[2].num}}</div>
                    <div class="graycss">{{menuList[2].eventname}}</div>
                </div>
            </div>
        </ion-col>
    </ion-row>


    <div class="menu-container">
        <div class="menu-items row">
            <div class="menu-item col-span-3" *ngFor="let item of messageTypeNumber" [routerLink]="item.url">
                <div class="icon row middle-psan center-span" (click)="onOpenMessageType(item)">
                    <!-- <ion-icon [name]="item.icon"></ion-icon> -->
                    <img [src]="item.icon">
                    <span class="redprompt">{{item.length}}</span>
                </div>
                <div class="text">{{ item.name }}</div>
            </div>
        </div>
    </div>

    <!-- <ion-slides pager="true" [options]="slideOpts" class="static-container">
    <ion-slide>
      <div class="static-item">
        <img
          [routerLink]="['/dashboard/message-number']"
          src="assets/images/dashboard/dashboard-01.png"
        />
      </div>
    </ion-slide>
    <ion-slide>
      <div class="static-item">
        <img
          [routerLink]="['/dashboard/message-status']"
          src="assets/images/dashboard/dashboard-02.png"
        />
      </div>
    </ion-slide>
  </!-->


    <!-- <ion-grid class="catalog-container">
        <ion-row>
            <ion-col size="6" *ngFor="let item of messageTypeNumber; index as i">
                <div class="catalog-item row" (click)="onOpenMessageType(item)">
                    <div class="col-span-4 row middle-span center-span">
                        <ion-icon class="catalog-icon" [src]="item.icon"></ion-icon>
                    </div>
                    <div class="col-span-8 col middle-span center-span">
                        <div class="catalog-number">
                            {{ item.length }}
                        </div>
                        <div class="catalog-name">{{ item.name }}</div>
                    </div>
                </div>
            </ion-col>
        </ion-row>
    </ion-grid> -->

    <ion-card-content class="message-container" style="padding:0">
        <ion-card-header style="background: white;">
            <ion-card-title class="row middle-span between-span">
                <div class="row middle-span ">
                    <span class="newsmark"></span>
                    <div class="ion-padding-end">最新消息</div>
                    <!-- <ion-badge mode="ios">{{ currentMessageList.length }}</ion-badge> -->
                </div>
                <a routerLink="/dashboard/message-list" style="color:#999999;">更多</a>
            </ion-card-title>
        </ion-card-header>
        <div>
            <ion-list *ngIf="currentMessageList.length; else empty">
                <app-message-item [canFold]="true" *ngFor="let item of currentMessageList" [data]="item"></app-message-item>
            </ion-list>
            <ng-template #empty>
                <app-empty> </app-empty>
            </ng-template>
        </div>
    </ion-card-content>

    <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed" class="untreated-container">
        <ion-fab-button background="yellow" color="danger" routerLink="/dashboard/message-list">
            <div class="col">
                <div class="untreated-number">5</div>
                <div class="untreated-name">待处理</div>
            </div>
        </ion-fab-button>
    </ion-fab> -->
    <ion-fab vertical="bottom" horizontal="end" slot="fixed" class="untreated-container">
        <div class="jumplist" routerLink="/dashboard/message-list">
            <!-- <ion-fab-button background="yellow" color="danger" routerLink="/dashboard/message-list"> -->
            <div class="col">
                <div class="untreated-number">{{menuList[0].num}}</div>
                <div class="untreated-name">待处理</div>
            </div>
        </div>
    </ion-fab>
</ion-content>
